<template>
  <div style="height:100%;">
    <div class="query">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="专家邮箱">
          <el-input type="email" v-model="search.email" placeholder="专家邮箱"></el-input>
        </el-form-item>
        <el-form-item label="专家昵称">
          <el-input type="text" v-model="search.nickname" placeholder="专家昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadPublishedList(true)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height:calc(100% - 120px);overflow-y:auto;overflow-x:hidden;width:100%;position:relative;">
      <el-card v-for="item in publishedList" :key="item.objid" class="tag-item">
        <el-image :src="item.canvasurl" fit="cover" style="height:350px;width:350px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div class="tag-item-content">
          <div style="cursor: pointer;">
            <el-link style="font-size:20px;font-weight:400;" :underline="false" :href="`/uIndex/tag?objid=${item.tagid}`" target="_blank">
              {{item.title}}
            </el-link>
            <p style="white-space:pre-wrap;">简介：{{item.introduce || "暂无简介~"}}</p>
          </div>
          <div class="other-msg">
            <div class="author">
              作者：<el-link style="font-size:16px;" :underline="false">{{item.nickname}}</el-link>
            </div>
            <a class="vzcc" :href="`/uIndex/tag?objid=${item.tagid}`" target="_blank">
              <el-link type="info" :underline="false" icon="fa fa-eye" style="padding:0 5px;">浏览量({{item.view}})</el-link>
              <el-link type="info" :underline="false" icon="fa fa-heart" style="padding:0 5px;">赞({{item.fav}})</el-link>
              <el-link type="info" :underline="false" icon="fa fa-comments-o" style="padding:0 5px;">评论({{item.comments}})</el-link>
              <el-link type="info" :underline="false" icon="fa fa-clock-o" style="padding:0 5px;">发布时间: {{item.ctime}}</el-link>
            </a>
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination :current-page="search.page" :page-size="search.limit"  @current-change="handleCurrentChange" layout="prev, pager, next" :total="search.total" style="margin-top:10px;">
    </el-pagination>
  </div>
</template>

<script>
import { getBeenSaveList } from "@/api/admin/mate"
export default {
  data() {
    return {
      publishedList: [],
      search: {
        email: '',
        nickname: "",
        page: 1,
        limit: 10,
        total: 0
      },
    }
  },
  created() {
    this.loadPublishedList()
  },
  methods: {
    loadPublishedList(clearpage = false) {
      if (clearpage) {
        this.search.page = 1
      }
      getBeenSaveList(this.search, (res) => {
        if (res.code == 200) {
          this.publishedList = res.data
          this.search.total = res.count
        }
      })
    },
    handleCurrentChange(val){
      this.search.page = val;
      this.loadPublishedList()
    }
  }
}
</script>

<style lang="less" scoped>
.tag-item {
  width: 100%;
  background: none;
  margin: 5px 0;
  position: relative;
}
.tag-item-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: calc(100% - 390px);
  height: calc(100% - 40px);
  overflow: hidden;
  padding: 20px 20px 20px 10px;
}

.other-msg {
  position: absolute;
  height: 30px;
  line-height: 30px;
  bottom: 30px;
  left: 0px;
  width: 100%;
}
.vzcc {
  position: absolute;
  right: 30px;
  top: 0px;
  width: calc(100% - 230px);
  text-align: right;
  display:block;
  text-decoration:none;
}
.author {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
}
</style>